<template>
  <div>
    <!-- 头部插槽 -->
    <MainInHead>
      <template #left>
        <span>区域搜索:</span>
      </template>
      <template #right>
        <el-input v-model.trim="input" type="text" label="区域搜索" placeholder="请输入" :clearable="true" @change="getRegion" />
        <el-button type="primary" class="topBtn" @click="getSearchInfo">查询</el-button>
      </template>
    </MainInHead>
    <!-- 内容插槽 -->
    <MainInConter>
      <template #conter>
        <!-- 表单控件 -->
        <Tabber :data="tableData" :pag-info="pagInfo" @setPage="setPageFn" @addInfo="addInfo" />
      </template>
    </MainInConter>
  </div>
</template>

<script>
// 引入内容插槽
import MainInConter from '../../../components/SvgIcon/MainConter/MainInConter.vue'
// 引入tab表格
import Tabber from '@/views/Point/components/Tabber'
// 获取区域管理信息列表\搜索区域信息
import { getZoneManagementInfo } from '@/api'
export default {
  components: { MainInConter, Tabber },
  data() {
    return {
      // 第一次进入页面传入要获取的数据
      pagNumInfo: {
        pageIndex: 1, // 当前页码数
        pageSize: 10 // 每页多少数据
      },
      // 给后续的数据作赋值操作便于分页器的使用
      pagInfo: {
        pageIndex: '', // 当前页码数
        pageSize: '', // 每页多少数据
        totalPage: '', // 总页数
        totalCount: ''// 信息总数量
      },
      input: '', // 双向绑定input的值
      tableData: []
    }
  },
  created() {
    this.getRegion()
  },
  methods: {
    // 获取区域信息列表于页码数信息
    async getRegion() {
      const res = await getZoneManagementInfo(this.pagNumInfo)
      // 将得到的信息赋值给tableData
      this.tableData = res.currentPageRecords
      // 将页码值信息赋值给pagNumInfo
      this.pagInfo.pageIndex = res.pageIndex
      this.pagInfo.pageSize = res.pageSize
      this.pagInfo.totalPage = res.totalPage
      this.pagInfo.totalCount = res.totalCount
      // console.log(this.tableData)
      // console.log(this.pagInfo)
    },
    // 搜索区域信息
    async getSearchInfo() {
      const res = await getZoneManagementInfo({
        pageIndex: this.pagNumInfo.pageIndex,
        pageSize: this.pagNumInfo.pageSize,
        name: this.input
      })
      // 将得到的信息赋值给tableData
      this.tableData = res.currentPageRecords
    },
    // 点击更换第几页数据
    setPageFn(val) {
      this.pagNumInfo.pageIndex = val
      this.getRegion()
    },
    // 新增信息后重新渲染(只要子组件信息发生变化就调用)
    addInfo() {
      this.getRegion()
    }
  }
}
</script>

<style scoped lang="scss">
.el-button {
  float: left;
  background-color: #8e76a2;
  color:#fff;
  border: 1px solid #fff;
}
.el-input{
  float: left;
  width: 203px;
}
.topBtn{
  margin-left: 20px !important;
}
::v-deep .el-table__header-wrapper{
  margin-top: 20px;
}

</style>
